.join-contain{
    --background: #efefef;
    .join-c-c{
        padding: 10px; background: #fff;
    }
}
.join-tab{
    background: #f1f1f1; border-bottom: 1px solid #a4a4a4; padding: 0px; --padding:0px;
    ion-row{
        text-align: center; color: #666;  font-size: 14px; font-weight: bold; 
    }
    .active{
        border-bottom: 4px solid #ff6565;
    }
}
.join-link{
    padding: 10px;
    .join-link-item{
        -moz-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12); -webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12); box-shadow:0 4px 16px rgba(0, 0, 0, 0.12); 
        background: #fff;margin-bottom: 20px; display: flex; align-items: center; flex-direction: row; border-radius: 5px; padding: 20px 10px;
        .join-link-item-msg{
            flex: 180; margin-left: 10px;
            p{
                margin: 5px 0px; font-size: 14px; color: #6f6f6f;
                &:last-child{
                    color: #ff6565;
                }
            }
        }
        .join-link-item-tip{
            flex: 110;
            span{
                background: #ff6565; color: #fff; padding: 4px 10px;border-radius: 20px;font-size: 14px;
            }
        }
    }
    .join-link-link{
        background: #fff;
        p{
            height: 40px; display: flex; align-items: center; margin: 0px;
            span{
                display: inline-block; font-size: 17px;
                &:first-child{
                    color: #c5c5c5; padding-left: 10px;
                }
                &.mark{
                    color: #00b6dd;
                }
            }
            .s-o{
                width: 30%;
            }
            .s-t{
                width: 40%;
            }
            .s-r{
                width: 20%;
            }
        }
       
    }
    .join-link-wq{
        height: 100px; background: #fff; display: flex; align-items: center; text-align: center; margin: 10px 0px;
        span{
            display: inline-block; width: 50%;
            ion-label{
                display: block;
            }
        }
        ion-label{
            font-size: 17px;
        }
    }
    .join-link-time{
        text-align: center; background: #fff;  font-size: 14px; text-align: center;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); border-radius: 5px;  padding: 20px 10px;
        p{
            margin: 5px 0px;
        }
        span{
            &.mark{
                color: #0391ff;
            }
        }
    }
}
.mark-contain{
    position: absolute; top: 0px; left: 0px; right: 0px; z-index: 10000; background: rgba(0,0,0,0.5); width: 100%; height: 100%;
    .img-div{
        height: 300px; width: 300px; background: #fff;  border-radius: 10px; padding: 30px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -150px;
        img{
            width: 100%; height: 100%;
        }
    }
}